<template>
  <div>
    <h3 style="text-align: center; font-size: 20px; margin-bottom: 10px">
      物流价格计算
    </h3>
    <div style="display: flex; justify-content: space-between">
      <div>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="包裹重量" prop="weight">
            <el-input-number
              style="width: 200px"
              v-model="ruleForm.weight"
              :max="10000000"
              label="请输入包裹重量"
            ></el-input-number>
            <span style="margin-left: 10px; color: #999"> g</span></el-form-item
          >
          <el-form-item label="包裹长度" prop="length">
            <el-input-number
              style="width: 200px"
              v-model="ruleForm.length"
              :min="1"
              :max="150"
              label="请输入包裹长度"
            ></el-input-number>

            <span style="margin-left: 10px; color: #999"> cm</span>
          </el-form-item>
          <el-form-item label="包裹宽度" prop="width">
            <el-input-number
              style="width: 200px"
              v-model="ruleForm.width"
              :min="1"
              :max="80"
              label="请输入包裹宽度"
            ></el-input-number>
            <span style="margin-left: 10px; color: #999"> cm</span>
          </el-form-item>
          <el-form-item label="包裹高度" prop="height">
            <el-input-number
              style="width: 200px"
              v-model="ruleForm.height"
              :min="1"
              :max="80"
              label="请输入包裹高度"
            ></el-input-number>
            <span style="margin-left: 10px; color: #999"> cm</span>
          </el-form-item>

          <el-form-item>
            <el-button
              round
              color="rgb(78 168 185)"
              style="
                width: 80px;
                color: #fff;
                margin-bottom: 20px;
                font-size: 12px;
              "
              type="primary"
              @click="submitForm('ruleForm')"
              >计算</el-button
            >
            <el-button
              round
              color="rgb(108 198 215)"
              style="
                width: 80px;
                color: #fff;
                margin-bottom: 20px;
                font-size: 12px;
              "
              type="primary"
              @click="resetForm('ruleForm')"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div
        style="
          width: 50%;
          height: 150px;
          border: 1px solid #eee;
          margin-right: 10px;
        "
      >
        <p style="text-align: center; font-weight: 700; font-size: 16px">
          计算结果
        </p>
        <div style="margin-right: 10px; height: 150px; overflow-y: scroll">
          <el-descriptions class="margin-top" :column="1" size="Small" border>
            <el-descriptions-item
              label-class-name="my-label"
              v-for="(item, index) in datas"
              :key="index"
            >
              <template #label>
                <i class="el-icon-user"></i>
                {{ item.name }}
              </template>
              {{ item.freight }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </div>
    <el-divider></el-divider>
    <lirun />
  </div>
</template>

<script>
import {h} from "vue";
import {ElNotification} from "element-plus";
//   import {shopShu,countw} from '@/api/login'
import {wuliujisuan} from "../../api/index";
import lirun from "./profit.vue";
export default {
  name: "logistics",
  components: {lirun},
  data() {
    return {
      ruleForm: {
        length: undefined,
        width: undefined,
        height: undefined,
        weight: undefined,
      },
      datas: [],
      rules: {
        length: [{required: true, message: "请输入包裹长度", trigger: "blur"}],
        width: [{required: true, message: "请输入包裹宽度", trigger: "change"}],
        height: [
          {
            type: "date",
            required: true,
            message: "请输入包裹高度",
            trigger: "change",
          },
        ],
        weight: [
          {
            type: "date",
            required: true,
            message: "请输入包裹重量",
            trigger: "change",
          },
        ],
      },
    };
  },
  activated() {
    console.log("Component activated");
  },
  created() {
    console.log(222);
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let dai = {
            length: undefined,
            width: undefined,
            height: undefined,
            weight: undefined,
          };
          for (let key in this.ruleForm) {
            if (Object.hasOwnProperty.call(this.ruleForm, key)) {
              const value = this.ruleForm[key];
              console.log(value);
              if (key === "width" || key === "length" || key === "height") {
                dai[key] = parseFloat(value.toFixed(2));
              } else if (key === "weight") {
                dai[key] = parseFloat((value / 1000).toFixed(3));
              }
            }
          }

          wuliujisuan(dai).then((res) => {
            if (res.code == 200) {
              console.log(res);
              this.datas = res.data;
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
:deep(.my-label) {
  width: 40%;
}
</style>
